<template>
  <div>
    <van-nav-bar @click-left="onClickLeft" title="我的学习" left-arrow>
      <template #right>
        <van-icon @click="rili" color="#000" size="20" name="calender-o" />
      </template>
    </van-nav-bar>
    <van-tabs @change="onchange">
      <van-tab v-for="(item,index) in tabs" :key="index" :title="`${item.name}(${item.num})`"></van-tab>
    </van-tabs>
    <div v-if="list.length">
      <mystausItem :data="list" />
    </div>
    <div v-else class="no-login">
      <img src="../../../assets/img/view.png" alt />
      <div>还没有课程，赶快去选择课程吧</div>
      <van-button @click="oninfo" class="info">选择课程</van-button>
    </div>
  </div>
</template>

<script>
import { mystaus } from "../../../request/http";
import mystausItem from "../../../components/My/order/mystausitem";
export default {
  name: "",
  data() {
    return {
      type: 2,
      list: [],
      tabs: []
    };
  },
  props: [],
  components: {
    mystausItem
  },
  mounted() {},
  created() {
    this.onmystaus();
  },
  methods: {
    rili() {
      this.$router.push("/candler");
    },
    oninfo() {
      this.$router.push("/course");
    },
    onmystaus() {
      mystaus(this.type).then(res => {
        console.log(res);
        this.list = res.courseList;
        this.tabs = res.typeNum;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onchange(index) {
      this.type = this.tabs[index].type;
      this.onmystaus();
    }
  }
};
</script>

<style scoped>
.no-login {
  text-align: center;
}
.no-login > img {
  width: 150px;
  height: 150px;
  margin-top: 120px;
}
.no-login > div {
  font-size: 4vw;
  color: #8c8c8c;
  margin-top: 5.33333vw;
}
.no-login > .van-button {
  width: 23.46667vw;
  height: 7.46667vw;
  border-radius: 1.06667vw;
  background-color: #eb6100;
  font-size: 3.46667vw;
  color: #fff;
  line-height: 7.46667vw;
  margin: 10.66667vw auto;
}
</style>